import React, { useState } from 'react';
import style from './index.module.scss';
import { useNavigate } from 'react-router-dom';
import TextField from '@mui/material/TextField';
import InputAdornment from '@mui/material/InputAdornment';
import MobileFriendly from '@mui/icons-material/MobileFriendly';
import HttpsIcon from '@mui/icons-material/Https';
import Button from '../../components/Button';
import Avatar from '@mui/material/Avatar';
import ArrowBackIosNew from '@mui/icons-material/ArrowBackIosNew';

export default function Login() {
    const [isFlag, setFlag] = useState(true);
    const [text, setText] = useState('获取验证码')
    const navigate = useNavigate();

    const leftClick = () => {
      if (isFlag) {
        return navigate(-1)
      }
      changeFlag(!isFlag);
    }

    const changeFlag = (value) => {
      setFlag(value)
    }
    // 验证码
    const changeText = () => {

    }
    

 
    // 渲染登陆
    const renderLogin = () => {
      return (
        <>  
            <div className={style.content}>
            <div className={style.login}>
              <div className={style.ipt}>
                <TextField style={{marginBottom: '30px'}}  size="small" fullWidth label="手机号" id="fullWidth"   InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <MobileFriendly />
                    </InputAdornment>
                  ),
                }} />
                <TextField style={{marginBottom: '30px'}}  size="small" fullWidth label="密码" id="fullWidth" InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <HttpsIcon />
                    </InputAdornment>
                  ),
                }}  />
                <Button isShadow={true} text={'登陆'} background={'rgb(255,112,103)'} borderRadius={'5px'} fontSize={'16px'}></Button>
              </div>
            </div>
          </div>
          <div className={style.noneBox} onClick={() => {changeFlag(false)}}> 
            没有账号?&nbsp;<span className={style.text}>注册</span>
          </div>
        </>
      )
    }  

    // 渲染注册
    const renderRegister = () => {
      return (
        <>
          <div className={style.content}>
            <div className={style.login}>
              <div className={style.ipt}>
                <TextField style={{marginBottom: '30px'}}  size="small" fullWidth label="手机号" id="fullWidth"   InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <MobileFriendly />
                    </InputAdornment>
                  ),
                  endAdornment: (
                    <InputAdornment position="start">
                      <div className={style.right_text}>
                        {text}
                      </div>
                    </InputAdornment>
                  )
                }} />
                <TextField style={{marginBottom: '30px'}}  size="small" fullWidth label="验证码" id="fullWidth" />
                <TextField style={{marginBottom: '30px'}}  size="small" fullWidth label="密码" id="fullWidth" InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <HttpsIcon />
                    </InputAdornment>
                  ),
                }}  />
                <Button isShadow={true} text={'创建账号'} background={'rgb(255,112,103)'} borderRadius={'5px'} fontSize={'16px'}></Button>
              </div>
            </div>
          </div>
        </>
      )
    }


    return (
      <>
        <div className={style.box}>
          <div className={style.top}>
            <div className={style.logo}>
              <Avatar sx={{ width: 80, height: 80 }} alt="湘小信" src="https://sls-cloudfunction-ap-guangzhou-code-1309209904.cos.ap-guangzhou.myqcloud.com/logo.png" />
            </div>
          </div>
          <div className={style.returnNavigate} onClick={() => {leftClick(false)}}>
            <ArrowBackIosNew></ArrowBackIosNew>返回
          </div>  
          { isFlag ? renderLogin() : renderRegister()}
        </div>

      </>
    )
}
